<template>
	<view class="white_bg">

		<!-- 状态栏 -->
		<view class="status_bar"></view>

		<!-- 导航栏 -->
		<u-navbar :autoBack="false" :placeholder="true">
			<view slot="left" style="display: flex;">
				<u-icon name="arrow-left" class="u-navbar__content__left" size="20" @click="back()"></u-icon>
				<view class="u-navbar__content__title navbar_title" >{{topicTitle}}</view>
			</view>
			<view slot="right" style="float: left;margin-right: 10px;" @tap="gotoSearch()">
				<u-icon name="search" size="30"></u-icon>
			</view>
		</u-navbar>


		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="upOption">

			<!-- banner -->
			<topic-info-banner id="banner_content" :topic-data="topicData"></topic-info-banner>

			<!-- 吸顶悬浮菜单 -->
			<u-sticky bgColor="#fff" style="width: 750upx;background-color: #FFFFFF;">
				<u-tabs :current="currentTab" :list="tabsList" @click="tabsClick"
					:style="'width:'+ (50 * tabsList.length) + 'px'" :scrollable="false"
					:activeStyle="{'color':'#303133','fontWeight':'bold','transform':'scale(1.05)'}">
				</u-tabs>
			</u-sticky>



			<!-- 数据列表 -->
			<swiper :style="{height: wHeight  + 'px'}" :current="currentTab" @change="swiperChange">

				<swiper-item v-for="(item,index) in tabsList" :key="index">
					<article-list ref="swiperItemList" :height="wHeight"  :order-type="item.id" 
								:disable-scroll="disableScroll || currentTab != index"
								:topic-id="topicData.id" @video_play="videoPlayBack">
					</article-list>
				</swiper-item>
			</swiper>

		</mescroll-body>
		
		<u-toast ref="uToast"></u-toast>
		
		<!-- 视频播放 -->
		<video-play ref="play" @touchmove.stop.prevent=""></video-play>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import TopicInfoBanner from './cpns/topicInfoBanner.vue'
	import ArticleList from './cpns/topic-article-list.vue'
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		components: {
			TopicInfoBanner,
			ArticleList,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 话题名称
				topicTitle: '',
				// banner的高度
				bannerHeight: 160,
				upOption: {
					// 是否启用下拉刷新
					use: false
				},
				// 导航栏高度
				navbaHeight: 44,
				// swiper的高度
				wHeight: 600,
				// swiper列表是否禁止滚动
				disableScroll: true,
				// 当前菜单索引
				currentTab: 0,
				tabsList: [{id: 1,name: '新帖',}, {id: 2,name: '热门',}],
				// 话题数据
				topicData: {}
			}
		},
		watch: {
			currentTab(i) {
				// 当列表禁止滚动时,需把列表滚动条置顶
				if (this.disableScroll) {
					// 当disableScroll=true时,scroll-view的scrollTo会失效,需先开启,再置顶
					this.disableScroll = false
					this.$nextTick(() => {
						let mescrollCpn = this.getSwiperItemScroll(i)
						if(mescrollCpn){
							let mescroll = mescrollCpn.mescroll
							mescroll && mescroll.scrollTo(0, 0)
						}
						setTimeout(() => {
							// 经测试android真机需延时300ms才能恢复禁止滚动,否则scrollTo有可能无效
							this.disableScroll = true
						}, 300)
					})
				}
			}
		},
		onLoad(option) {
			this.topicData.id = option.id
			this.getTopicInfo()
			this.initPageData();
			// 设置swiper的高度
			this.wHeight = uni.getSystemInfoSync().windowHeight
			// 获取banner的高度
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select("#banner_content").boundingClientRect(data => {
					this.bannerHeight = data.height
				}).exec()
			})
		},
		methods: {
			// 获取话题信息
			getTopicInfo() {
				this.$httpApi.baseArticleGet('open/topic/info/' + this.topicData.id, {}).then(({data}) => {
					if (data.code == "000000") {
						this.topicData = data.data
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {})
			},
			// 初始化数据
			async initPageData(){
				this.$nextTick(()=>{
					let ref =  this.getSwiperItemScroll(this.currentTab)
					if(ref){
						ref.init();
					}
				})				
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			// swiper切换
			swiperChange(e) {
				this.currentTab = e.detail.current
				this.initPageData();
			},
			// tabs点击事件
			tabsClick(e) {
				this.currentTab = e.index
				this.initPageData();
			},
			// 页面的滚动事件
			onPageScroll(e) {
				let d = Math.ceil(e.scrollTop) < this.bannerHeight
				this.disableScroll = d
				if (!d) {
					this.topicTitle = this.topicData.name
				} else {
					this.topicTitle = ''
				}
			},			
			// 获取指定下标的mescroll对象
			getSwiperItemScroll(i) {
				let swiperItems = this.$refs.swiperItemList;
				return swiperItems?swiperItems[i]:null				
			},
			// 返回上一页
			back(){
				uni.navigateBack()
			},
			// 前往搜索
			gotoSearch(){
				uni.navigateTo({
					url: '/pages/search/topicSearchResult?id='+this.topicData.id
				})
			}
			


		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 4px !important;
	}

	::v-deep .u-navbar__content__left {
		padding: 0 13px 0 3px !important;
	}
	::v-deep .u-navbar__content__title {
		text-align: left !important;
	}
	
	.navbar_title{
		margin-left: 6px;
		width: 450rpx;
		line-height: 20px;
		white-space: nowrap;   
		overflow: hidden; 
		text-overflow: ellipsis;
	}
</style>
